<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>试卷</title>
<style type="text/css">
h2 {
	font-family: "微软雅黑";
	font-size: 40px;
	margin: 20px 0;
	padding-bottom: 20px;
	letter-spacing: 2px;
}

.time-item strong {
	background: #C71C60;
	color: #fff;
	line-height: 49px;
	font-size: 36px;
	font-family: Arial;
	padding: 0 10px;
	margin-right: 10px;
	border-radius: 5px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.item-title .unit {
	background: none;
	line-height: 49px;
	font-size: 24px;
	padding: 0 10px;
	float: left;
}
</style>
</head>
<body>
	<script type="text/javascript">
		var outTime = ${outTime };
		var intDiff = parseInt( outTime );//倒计时总秒数量
		function timer(intDiff) {
			window.setInterval(function() {
				var day = 0, hour = 0, minute = 0, second = 0;//时间默认值        
				if (intDiff > 0) {
					day = Math.floor(intDiff / (60 * 60 * 24));
					hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
					minute = Math.floor(intDiff / 60) - (day * 24 * 60)
							- (hour * 60);
					second = Math.floor(intDiff) - (day * 24 * 60 * 60)
							- (hour * 60 * 60) - (minute * 60);
				}
				if (minute <= 9)
					minute = '0' + minute;
				if (second <= 9)
					second = '0' + second;
				$('#day_show').html(day + "天");
				$('#hour_show').html('<s id="h"></s>' + hour + '时');
				$('#minute_show').html('<s></s>' + minute + '分');
				$('#second_show').html('<s></s>' + second + '秒');
				intDiff--;
			}, 1000);
		}
		$(function() {
			timer(intDiff);
		});
	</script>
    <div id="testPaper">	
    	<div class="widget-box widget-color-dark">   		
			<div class="time-item">
				<h2>交卷倒计时</h2><strong id="hour_show">0时</strong> <strong
					id="minute_show">0分</strong> <strong id="second_show">0秒</strong>
				
			</div>
			
			<div class="widget-header">
				<h5 class="widget-title bigger lighter">试卷</h5>
			</div>

			<div class="widget-body">
				<div class="widget-main">
					<h4>一、单选题。</h4><br />
					<c:forEach items="${testList }" var="list" varStatus="status">
						<div>
							${ status.index + 1}.${list.content }(  )<br /> <br />
							&nbsp;&nbsp;<input class="sigle2" type="radio" name="answer${ status.index + 1}" value="${list.id }A" /> A.${list.chooseA }<br /> <br /> 
							&nbsp;&nbsp;<input class="sigle2" type="radio" name="answer${ status.index + 1}" value="${list.id }B" /> B.${list.chooseB }<br /> <br /> 
							&nbsp;&nbsp;<input class="sigle2" type="radio" name="answer${ status.index + 1}" value="${list.id }C" /> C.${list.chooseC }<br /> <br /> 
							&nbsp;&nbsp;<input class="sigle2" type="radio" name="answer${ status.index + 1}" value="${list.id }D" /> D.${list.chooseD }<br /> <br /> <br />  
						</div>
					</c:forEach>
				</div>

				<div>
					<a id="SaveAnswerBtn" class="btn btn-block btn-inverse">
						<span>保存</span>
					</a>
				</div>
			</div>
		</div>	
		<div id="scoreDiv"></div>
	</div>
	<script type="text/javascript">
	$(function() {
		$('#SaveAnswerBtn').click(function() {
			var answerString = '';
			var boxs = document.getElementById("testPaper").getElementsByTagName('input');
			for(var i=0;i<boxs.length;i++){
	            if(boxs[i].checked){
           			answerString += boxs[i].value;
           			answerString += ",";	            	
	            }
	        }
			$.ajax({
				type : 'POST',
				url : '${contextPath}/teacher/getAnswer',
				data : {
					answerString : answerString
				},
				dateType : "json",
				success : function(data) {
					var htmlString = '你的得分：';
					htmlString += '<h1 style="color:red;">'+data.score+'</h1>';
					htmlString += '答对题数：';
					htmlString += '<h1 style="color:red;">'+data.count+'</h1>';
					$('#scoreDiv').html(htmlString);
				},
				error : function(data, status, e)//服务器响应失败处理函数
				{
					alert(data.error);
				}
			});			
		});
	})
	</script>
</body>
</html>